<template>
  <div>
    <h2>手柄拖拽</h2>
    <el-table :data="tableData"
              ref="dragTable"
              border
              style="width: 100%">
      <el-table-column prop="date"
                       label="日期"
                       width="180">
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       width="180">
      </el-table-column>
      <el-table-column prop="address"
                       label="地址">
      </el-table-column>
      <el-table-column prop="age"
                       label="年龄">
      </el-table-column>
      <el-table-column prop="phone"
                       label="电话">
      </el-table-column>
      <el-table-column align="center"
                       label="Drag"
                       width="80">
        <template slot-scope="{}">
          <i class="el-icon-rank drag-handler"></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import { Table } from 'element-ui'
import Sortable from 'sortablejs'
@Component({
  name: 'drag-table'
})
export default class extends Vue {
  private tableData: any[] = [
    {
      date: '2016-05-02',
      name: '王一一',
      address: '上海市普陀区金沙江路 1518 弄',
      age: 18,
      phone: 13456567499
    },
    {
      date: '2016-05-04',
      name: '王二二',
      address: '上海市普陀区金沙江路 1517 弄',
      age: 20,
      phone: 12312313
    },
    {
      date: '2016-05-01',
      name: '王三三',
      address: '上海市普陀区金沙江路 1519 弄',
      age: 33,
      phone: 22222222222222
    },
    {
      date: '2016-05-03',
      name: '王四四',
      address: '上海市普陀区金沙江路 1516 弄',
      age: 15,
      phone: 88888888888888
    },
    {
      date: '2016-05-06',
      name: '王五五',
      address: '上海市普陀区金沙江路 1516 弄',
      age: 25,
      phone: 954634563465
    }
  ]

  mounted () {
    const el = (this.$refs.dragTable as Table).$el.querySelectorAll(
      '.el-table__body-wrapper > table > tbody'
    )[0]
    const sorttable = Sortable.create(el, {
      animation: 150,
      handle: '.drag-handler', // 配置了拖拽手柄意味着只能拖动这个手柄，拖其他的不行
      ghostClass: 'blue-background-class',
      setData (dataTransfer, dragEl: any) {
        dataTransfer.setData('Text', dragEl.textContent) // `dataTransfer` object of HTML5 DragEvent
      },
      // 元素被选中
      onChoose (/** Event */ evt) {
        evt.oldIndex // element index within parent
        // console.log(evt)
      }
    })
  }
}
</script>
<style>
.blue-background-class {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
</style>
<style lang="scss" scoped>
#items {
  list-style-type: none;
  li {
    width: 60px;
    background-color: red;
    border: 1px solid #000;
  }
}
</style>
